<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link href="/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/js/libSys/commonHeader.js" rel="script"></script>
</head>
<body>
<video src="/video/login.mp4" loop="loop" autoplay="autoplay" muted></video>
<div th:replace="libSys/libSysCommonHeader::libSysCommonHeader"></div>

<br>
<br>
<br>
<div class="layui-container" >
    <form action="/login" method="post" class="layui-form" style="width:500px;padding-right:90px;float:right;opacity:0.8;background-color:#000000" >
        <br>
        <br>
        <br>
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-block">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn">登陆</button>
            </div>
        </div>
        <br>
        <br>
        <br>
    </form>
</div>
<style>
video{
    position: fixed;//视频定位方式设为固定
    right: 0;
    bottom: 0;//视频位置
    min-width: 100%;
    min-height: 100%; //不会因视频尺寸造成页面需要滚动
    width: auto;
    height: auto; //尺寸保持原视频大小
    z-index: -100; //z轴定位，小于0即可
    -webkit-filter: grayscale(20%);//添加灰度蒙版，如果设定为100%则视频显示为黑白
}
.libSysCommonHeader{
    z-index: 1;
}
</style>
<script>
    layui.use(["form",],function(){
        var form = layui.form;
    });
</script>

</body>
</html>